<template>
	<view class="resume" v-loading="loading" :element-loading-text="loadingTitle">
		<view class="position_t flex aic jcsb">
			<image @click="back()" src="@/static/back.png" mode=""></image>
			<p class="fonts18 fontz fontw700">我的简历</p>
			<view class="position_t_right">
				<text class="fonts14 fontz" @click="report()">预览</text>
			</view>
		</view>
		<view class="content_" style="background: #ffffff;">
			<view class="resume_main_header flex aic jcsb">
				<view class="flex aic">
					<image v-if="perInfo.photoUrl" :src="perInfo.photoUrl" mode="" style="border-radius: 50%;"></image>
					<image v-if="perInfo.photoUrl==1" src="@/static/touxiang.png"  mode=""></image>
					<p class="fontz fonts16 fontw700" style="margin-left: 16px;">{{perInfo.fullName}}</p>
					<p class="fontz fonts12 gray" style="margin-left: 8px; margin-right: 10px;">
						{{perInfo.age?perInfo.age+'岁':''}} {{perInfo.education}} {{perInfo.startWorkTimes}}
					</p>
				</view>
				<view class="">
					<image src="@/static/down.png" mode="" style="width: 17px;height: 17px;" @click="down()"></image>
					<!-- <image src="@/static/edit.png" mode=""
						style="width: 17px;height: 17px;z-index: 999;margin-left: 16px;" @click="edit()"> -->
				</view>

				</image>
			</view>
			<view class="resume_main">
				<p class="fontz fonts14 fontw700 resume_main_title flex jcsb aic" style="margin-top: 16px;">
					<text>基本信息</text>
				</p>
				<view  class="resume_main_content flex jcsb aic" @click="edit()">
					<view class="" style="width: calc(100% - 29px);">
						<view class="flex jcsb">
							<text class="fonts14 fontz fontw500">{{perInfo.fullName}}</text>
						</view>
					</view>
					<view class="">
						<image src="@/static/icon／arrow-right.png" mode="" style="width: 20px;height: 20px;"></image>
					</view>
				</view>
				<view class="" v-for="(item,index) in basicData" :key="index">
					<Myresume :data="item" />
				</view>
			</view>
		</view>
		<view class="position_footer flex aic jcsb" v-if="!editBool">
			<UploadFile @uploadImageClick="uploadImageClicks_" style="width: 60%;" />
			<el-button class="blue_btn" style="min-width: 30%;" type="primary" @click="editSure()">提交</el-button>
		</view>
		<view class="position_footer flex aic jcsb" v-if="editBool">
			<el-button class="" style="width: 40%;justify-self:end;" type="" @click="react()">取消</el-button>
			<el-button class="blue_btn" style="width: 60%;z-index: 9;" type="primary" @click="editSure()">提交</el-button>
		</view>
	</view>
</template>

<script>
	import UploadFile from "@/pages/components/UploadFile.vue"
	import Myresume from "../../components/Myresume.vue";
	import {
		getResume,
		exportResume,
		editResumes
	} from "@/api/my.js";
	import {
		dictFun
	} from "@/util/dictionary";
	export default {
		components: {
			Myresume,
			UploadFile
		},
		data() {
			return {
				editBool: "",
				loading: false,
				loadingTitle: "",
				perInfo: {
					photoUrl: "1",
					age: "",
					fullName: "",
					education: "",
					startWorkTimes: ""
				}, //基础信息
				data: [],
				datas: {}, //全部信息
				basicData: [{
						title: "求职期望",
						id: 0,
						add: false,
						url: "/pages/my/resume/jobHope/jobHope",
						data: {}
					},
					{
						title: "工作经历",
						add: true,
						id: 2,
						url: "/pages/my/resume/jobhistory/jobhistory",
						data: {}
					},
					{
						title: "教育经历",
						add: true,
						id: 3,
						url: "/pages/my/resume/education/education",
						data: {}
					},
					{
						title: "项目经历",
						add: true,
						id: 4,
						url: "/pages/my/resume/project/project",
						data: {}
					},
					{
						title: "培训经历",
						add: true,
						id: 5,
						url: "/pages/my/resume/train/train",
						data: {}
					},
					{
						title: "专业技能",
						add: true,
						id: 6,
						url: "/pages/my/resume/skill/skill",
						data: {}
					},
					{
						title: "资格证书",
						add: true,
						id: 7,
						url: "/pages/my/resume/certificate/certificate",
						data: {}
					},
					{
						title: "自我评价",
						add: false,
						id: 1,
						url: "/pages/my/resume/self/self",
						data: {}
					},
					
					{
						title: "业绩及奖惩情况",
						add: false,
						id: 10,
						url: "/pages/my/resume/performance/performance",
						data: {}
					},
					
					

					{
						title: "家庭主要成员及重要社会关系",
						add: true,
						id: 8,
						url: "/pages/my/resume/family/family",
						data: {}
					},

					{
						title: "本人承诺",
						add: false,
						id: 9,
						url: "",
						data: {}
					}
				]
			};
		},
		onLoad() {
			this.info()
		},
		onShow() {
			console.log("回来刷新呀！");
			let data = uni.getStorageSync("myResume")
			this.infos(data)
		},
		onPullDownRefresh() {
			this.info()
			this.editBool=false
			uni.stopPullDownRefresh()
		},
		methods: {
			down() {
				exportResume().then(res => {
					const {
						data,
						header
					} = res
					console.log(res);
					// const fileName = header['content-disposition'].replace(/\w+;filename=(.*)/,'$1')
					const fileName = "resume.docx"
					//此处当返回json文件时需要先对data进行JSON.stringify处理，其他类型文件不用做处理
					//const blob = new Blob([JsoN.stringify(data)], ...)
					const blob = new Blob([data], {
						type: header['content-type']
					})
					let dom = document.createElement('a')
					let url = window.URL.createObjectURL(blob)
					dom.href = url
					dom.download = decodeURI(fileName)
					dom.style.display = 'none'
					document.body.appendChild(dom)
					dom.click()
					dom.parentNode.removeChild(dom)
					window.URL.revokeObjectURL(url)
				});
			},
			info() {
				this.getResumeApi_()
			},
			infos(data) {
				console.log(data);
				this.perInfo.photoUrl = ""
				this.datas = data
				if(data.personalInformation){
					this.perInfo = data.personalInformation
					this.perInfo.photoUrl = data.personalInformation.photoUrl ? data.personalInformation.photoUrl : ""
					this.perInfo.startWorkTimes = this.startWorkTimeFun(data.personalInformation.startWorkTime)
				}
				console.log("照片：",this.perInfo.photoUrl);
				this.perInfo.education = this.educationLevelFun(data.educationExperiences ? data.educationExperiences : [])
				for (let i = 0; i < this.basicData.length; i++) {
					this.basicData[i].data = this.datas
				}
				this.$forceUpdate()
			},
			uploadImageClicks_(value) {
				console.log(value);
				this.loadingTitle = value.type
				setTimeout(() => {
					this.loading = value.bool
				}, 500)
				if (value.data) {
					console.log("value.data", value.data);
					this.editBool = true
					uni.setStorageSync("myResume", value.data)
					this.infos(value.data)
				}
			},
			getResumeApi_() {
				this.loadingTitle = "加载中...";
				this.loading = true
				getResume().then(res => {
					console.log(res);
					this.loading = false
					let data = res.data
					this.datas = res.data
					uni.setStorageSync("myResume", this.datas)
					this.infos(this.datas)
					// this.perInfo = data.personalInformation
					// this.photoUrl = data.personalInformation.photoUrl ? data.personalInformation.photoUrl : ""
					// this.perInfo.education = this.educationLevelFun(data.educationExperiences)
					// this.perInfo.startWorkTimes = this.startWorkTimeFun(data.personalInformation.startWorkTime)
					// for (let i = 0; i < this.basicData.length; i++) {
					// 	this.basicData[i].data = this.datas
					// }
				})
			},
			back() {
				uni.navigateBack(-1)
			},
			report() {
				console.log("预览");
				uni.navigateTo({
					url: "/pages/my/resume/look/look?datas="+JSON.stringify(this.datas)
				})
			},
			react() {
				this.editBool = false
				this.info()
			},
			edit() {
				uni.navigateTo({
					url: "/pages/my/resume/basic/basic?data=" + JSON.stringify(this.datas)
				})
			},
			editSure() {
				console.log("总数据:", this.datas);
				if (!this.datas.educationExperiences || this.datas.educationExperiences.length < 1) {
					this.$message({
						message: '教育经历不得少于1段',
						type: 'error',
						offset: 0.1
					});
					return
				}
				// console.log("....");
				this.loadingTitle = "提交中...";
				this.loading = true
				editResumes(this.datas).then(res => {
					this.loading = false
					this.$message({
						message: '提交成功',
						type: 'success',
						offset: 0.1
					});
				}).catch(res => {
					console.log(res);
					this.loading = false
					// this.$message({
					// 	message: `${res.msg}`,
					// 	type: 'error',
					// 	offset: 0.1
					// });
				})
			},
			educationLevelFun(res) {
				if (res.length != 0) {
					console.log(res);
					let number = res[res.length - 1].educationLevel ? res[res.length - 1].educationLevel : ""
					if (number == "") {
						return ""
					} else {
						if (this.dictFuns(number, "education")) {
							return "|  " + this.dictFuns(number, "education")
						} else {
							return ""
						}

					}


				} else {
					return ""
				}
			},
			startWorkTimeFun(res) {
				if (res) {
					let number = 0
					let date = new Date()
					let year = date.getFullYear();
					number = year - res.split("-")[0]
					if (number == 0) {
						return ""
					} else {
						return "| " + number + "年工作经验"
					}

				} else {
					return ""
				}

			},
			dictFuns(value, res) {
				return dictFun(value, res)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.resume {
		position: relative;

		.position_t {
			background-color: #FFFFFF;
			width: calc(100% - 24px);
			position: fixed;
			height: 44px;

			image {
				width: 30px;
				height: 30px;
			}

			.position_t_right {
				text {
					// margin-right: 20px;
					color: #2F6CBC;
				}

				image {
					width: 18px;
					height: 17px;
				}
			}

		}

	}

	.resume_main {
		height: calc(100vh - 200px);
		overflow-y: auto;
		padding: 0px 12px 0px 12px;

		&::-webkit-scrollbar {
			display: none;
			/*隐藏滚动轴*/
		}

	}

	.color2 {
		color: #606266;
	}

	.position_content {
		padding-top: 44px;
	}

	.position_content_main {
		margin-top: 10px;
		padding: 13px 15px;
		background: #FFFFFF;
	}

	.position_footer {
		height: 40px;
		z-index: 1;
		position: absolute;
		bottom: 0;
		background: #ffffff;
		box-shadow: 0px -1px 3px 0px rgba(48, 48, 48, 0.0592);
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		width: calc(100% - 24px);
		padding: 12px;

		.blue_btn {
			background: #2F6CBC;
			border: 1px solid #2F6CBC;
		}
	}

	.resume_main_header {

		padding: 59px 0px 15px 0px;
		border-bottom: 1px solid #D8D8D8;

		image {
			width: 40px;
			height: 40px;
		}
	}

	.resume_main_m {
		margin-top: 24px;
	}
	.resume_main_title {
		position: relative;
		padding-left: 10px;
	
		&::after {
			position: absolute;
			left: 0;
			top: 2px;
			content: "";
			width: 4px;
			height: 16px;
			background: #2F6CBC;
			border-radius: 0px 2px 2px 0px;
			opacity: 1;
		}
	}
	.resume_main_content {
		margin-top: 8px;
		padding: 12px;
		background: #FFFFFF;
		border-radius: 8px 8px 8px 8px;
		opacity: 1;
		border: 1px solid #2F6CBC;
	}
</style>
